<template>
  <div class="table-list">
    <el-table :data="tableData" class="width-per-100" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      v-loading="loading"  element-loading-background="#2B2B2E" :highlight-current-row="false" target="el-table__body">
      <el-table-column label="排名" width="81">
        <template slot-scope="scope">
          <div v-if="scope.row.rank<=3">
            <img v-if="scope.$index === 0" :src="rankingIcon1" />
            <img v-else-if="scope.$index === 1" :src="rankingIcon2" />
            <img v-else-if="scope.$index === 2" :src="rankingIcon3" />
          </div>
          <div v-else class="pad-l-15">
            {{scope.row.rank}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品" width="920">
        <template slot-scope="scope">
          <div class="flex font-14 ">
            <div class="flex">
              <img class="width-84 height-84" :src="scope.row.mainImage" alt="">
            </div>
            <div class="flex-col pad-t-5 mar-l-14 width-per-100">
              <div class="v-align-c">
                <span class="font-white line-1 goods-title">{{scope.row.title}}</span>
                <span v-if="scope.row.categoryName" class="sort-box height-24 mar-l-15">{{scope.row.categoryName}}</span>
              </div>
              <div class="mar-t-9">
                <div v-if="scope.row.goodsSourceName"><span>来源: </span><span class="font-white">{{scope.row.goodsSourceName}}</span></div>
                <div v-if="scope.row.brandName"><span>品牌: </span><span>{{scope.row.brandName}}</span></div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="售价(元)" width="239">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.sellPrice" class="font-white" v-formatNum="scope.row.sellPrice"></span>
            <span v-if="scope.row.scribingPrice">/ 原价</span>
            <span v-if="scope.row.scribingPrice" v-formatNum="scope.row.scribingPrice"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salesNum" label="销量(件)"></el-table-column>
      <el-table-column prop="goodsPayAmount" label="销售额(元)"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import rankingIcon1 from '@/assets/images/ranking-icon-1.png'
import rankingIcon2 from '@/assets/images/ranking-icon-2.png'
import rankingIcon3 from '@/assets/images/ranking-icon-3.png'
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      rankingIcon1,
      rankingIcon2,
      rankingIcon3
    }
  },
  onShow() {
  },
  mounted() {
    this.$bus.$on('loading', (res) => {
      this.loading = res
    })
    this.$bus.$on('getRecords', (data) => {
      this.tableData = data
    })
  },
  methods: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .table-list {
    /deep/ .el-table {
      color: rgba(255,255,255,0.5);
      .el-table__header {
        th {
        background: #3A3A3E !important;
        color:rgba(255,255,255,0.5);
        border: none;
        }
        tr {
          height: 48px;
        }
      }
      tr {
        background: #252529;
        height: 110px;
      }
      tr:hover>td { 
        background-color: #252529 !important; 
      }
      td {
        border-bottom: 1px solid #3A3A3E !important;
        padding: 0;
      }
      .el-table__empty-block {
        background: #252529;
        color:rgba(255,255,255,0.5);
      }
    }
    /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
      background-color: #252529 !important;
    }
    .sort-box {
      color: #1890FF;
      border: 1px solid #1890FF;
      border-radius: 4px;
      padding: 0px 9px;
    }
    .line-1{
      line-height: 1.4;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    .goods-title {
      max-width: 45%;
    }
  }
</style>